<template>

  <div id="box">

    <van-pull-refresh
    v-model="isLoading"
    success-text="刷新成功"
    @refresh="onRefresh"
    >
    <Search></Search>
    <son-search v-if="$route.name === 'search'"></son-search>

    <Swipe :banarlist="banarlist" v-show="searchbool"></Swipe>
    <grid v-show="searchbool"></grid>




    <product-card :productlist=productList v-show="searchbool"></product-card>

    </van-pull-refresh>




  </div>

</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
import Swipe from "../../components/Swipe";
import Search from "../../components/Search";
import sonSearch from "./sonAssembly/sonSearch";
import grid from "../../components/list/grid";
import productCard from "../../components/list/productCard";
import IndexAx from "./axios";

const ax = new IndexAx()

export default {
  name: "list",
  data(){
    return {
      msg:"我是列表页",
      banarlist:[],
      productList:[],
      searchvalue:"",
      searchbool:true,
      isLoading:true,
      count:1

    }
  },

  components:{
    Swipe,
    Search,
    sonSearch,
    grid,
    productCard,
  },
  created() {
     ax.Rotation().then(response=>{
       this.banarlist = response.data.data
     })

    //商品数据
    ax.ProductList({page:this.count}).then(response=>{
      this.productList = response.data.data

    })

    this.changeShowBool()

  },
  beforeRouteEnter(to, from, next){
    next()
  },
  methods:{
    ...mapActions("model", []),
    ...mapMutations("model", []),
    changeShowBool(){
      switch (this.$route.name){
        case "search":
          this.searchbool = false;
          return
        case "detail":
          this.searchbool = false;
          return
        default:
          this.searchbool = true
      }
    },
    onRefresh(){
      setTimeout(() => {

        this.isLoading = false;
        this.count++;
      }, 1000);
    }

  },
  //监听路由变化手动加载页面
  watch:{
    $route(){
      this.$router.go(0)
    },
    count(){
      ax.ProductList({page:this.count}).then(response=>{
        this.productList = response.data.data

      })
    }
  }
  ,
  computed:{
    ...mapGetters("model", []),
    ...mapState("model", [])
  }
}
</script>

<style lang="less" scoped>



</style>